<template>
  <div>
    <el-form :inline="true" style="width: 100%;margin-bottom: -10px;margin-top: -10px;" label-width="80px">
      <el-form-item>
        <el-button v-if="$route.query.type == 'vLook'" size="mini" type="success" icon="el-icon-back" @click="returnVolumeChange">返回</el-button>
        <el-button v-if="$route.query.type == 'iLook'" size="mini" icon="el-icon-back" type="success" @click="returnRoomPaper">返回考场</el-button>
        <el-button v-if="$route.query.type == 'sLook'" size="mini" icon="el-icon-back" type="success" @click="returnUserRoomPaper">返回考场</el-button>
      </el-form-item>
    </el-form>
    <el-card>
      <el-form :model="examinationPaper" status-icon la style="width: 80%;margin: auto">
           <div style="text-align: center">
             <h2 style="font-size: 25px;margin-bottom: 50px;">{{examinationPaper.ep_name}}</h2>
             <p style="font-size: 20px;margin-top: 50px;">{{examinationPaper.ep_describe}}</p>
           </div>
           <div style="margin-top: 30px;margin-bottom: 50px;">
             <div style="float: right">
               <label style="margin-right: 20px;">总分：{{examinationPaper.ep_fraction}}</label>
               <label>时间(分钟)：{{examinationPaper.ep_test_time}}</label>
             </div>
           </div>
        <el-divider></el-divider>
        <template v-for="(obj,index) in examinationPaper.testQuestionsList">
           <div v-if="obj.tq_type == 1">
             <h3 style="margin-bottom: 40px;">{{index+1}}. 单选题（{{obj.tq_fraction}}分）</h3>
             <div v-for="(item,index) in obj.questionList" style="margin-left: 15px;">
               <div style="margin-bottom: 30px;margin-top: 20px;">{{index+1}}.{{item.ch_title}}</div>
               <el-form-item style="margin-left: 15px;">
                 <el-radio-group v-model="item.chooseAnswerList[0].ca_answer">
                   <div style="margin-bottom: 8px;"><el-radio label="A" value="A">A.<label style="margin-left: 10px;">{{item.ch_choose_A}}</label></el-radio></div>
                   <div style="margin-bottom: 8px;"><el-radio label="B" value="B">B.<label style="margin-left: 10px;">{{item.ch_choose_B}}</label></el-radio></div>
                   <div style="margin-bottom: 8px;"><el-radio label="C" value="C">C.<label style="margin-left: 10px;">{{item.ch_choose_C}}</label></el-radio></div>
                   <div style="margin-bottom: 8px;"><el-radio label="D" value="D">D.<label style="margin-left: 10px;">{{item.ch_choose_D}}</label></el-radio></div>
                 </el-radio-group>
               </el-form-item>
             </div>
           </div>
            <div v-if="obj.tq_type == 2">
              <h3 style="margin-bottom: 40px;">{{index+1}}. 多选题（{{obj.tq_fraction}}分）</h3>
              <div v-for="(item,index) in obj.questionList" style="margin-left: 15px;">
                <div style="margin-bottom: 20px;margin-top: 20px;">{{index+1}}.{{item.ch_title}}</div>
                <el-form-item style="margin-left: 15px;">
                  <el-checkbox-group v-model="item.answerArr">
                    <div style="margin-bottom: -12px;"><el-checkbox label="A" value="A">A.<label style="margin-left: 10px;">{{item.ch_choose_A}}</label></el-checkbox></div>
                    <div style="margin-bottom: -12px;"><el-checkbox label="B" value="B">B.<label style="margin-left: 10px;">{{item.ch_choose_B}}</label></el-checkbox></div>
                    <div style="margin-bottom: -12px;"><el-checkbox label="C" value="C">C.<label style="margin-left: 10px;">{{item.ch_choose_C}}</label></el-checkbox></div>
                    <div style="margin-bottom: -12px;"><el-checkbox label="D" value="D">D.<label style="margin-left: 10px;">{{item.ch_choose_D}}</label></el-checkbox></div>
                  </el-checkbox-group>
                </el-form-item>
              </div>
            </div>
            <div v-if="obj.tq_type == 3">
              <h3 style="margin-bottom: 40px;">{{index+1}}. 判断题（{{obj.tq_fraction}}分）</h3>
              <div v-for="(item,index) in obj.questionList" style="margin-left: 15px;">
                <div style="margin-bottom: 20px;margin-top: 20px;">{{index+1}}.{{item.j_title}}</div>
                <el-form-item style="margin-left: 15px;">
                  <el-radio-group v-model="item.judgmentAnswer.ja_answer">
                    <div style="margin-bottom: 8px;"><el-radio  label="1" value="1">√</el-radio></div>
                    <div style="margin-bottom: 8px;"><el-radio  label="2" value="2">×</el-radio></div>
                   </el-radio-group>
                </el-form-item>
              </div>
            </div>
            <div v-if="obj.tq_type == 4">
              <h3 style="margin-bottom: 40px;">{{index+1}}. 填空题（{{obj.tq_fraction}}分）</h3>
              <div v-for="(item,index) in obj.questionList" style="margin-left: 15px;">
                <div style="margin-bottom: 20px;margin-top: 20px;">{{index+1}}.{{item.fb_title}}</div>
                <div v-for="(v,k) in item.answerArr" :key="k">
                  <el-row style="margin-bottom: 0px;" :span="24">
                    <el-form-item style="margin-bottom: 0px;margin-left: 15px;">
                      <el-col :span="1">
                         {{v.label}}
                      </el-col>
                      <el-col :span="6">
                         <el-input v-model="v.value" size="mini"></el-input>
                      </el-col>
                    </el-form-item>
                  </el-row>
                </div>
              </div>
            </div>
        </template>
        <el-divider></el-divider>
        <div style="text-align: right">出卷时间：{{examinationPaper.ep_time}}</div>
      </el-form>
    </el-card>
  </div>
</template>
<script>
  import {getExaminationPaperById,getNoAnswerExaminationPaperById} from '@/api/invigilate'
  import ElFormItem from "../../../../../node_modules/element-ui/packages/form/src/form-item";
  import ElCol from "element-ui/packages/col/src/col";
  export default{
    components: {
      ElCol,
      ElFormItem},
    created(){
         this.getExaminationPaperData();
      },
      data(){
          return {
               examinationPaper:{
                   ep_name:"",
                   ep_describe:"",
                   ep_test_time:0,
                   ep_fraction:0,
                   testQuestionsList:[]
               },
          }
      },

      methods:{
        getExaminationPaperData(){
          if(this.$route.query.type == "vLook" || this.$route.query.type == "sLook"){
            getExaminationPaperById({ep_id:parseInt(this.$route.query.ep_id)}).then(res=>{
              if(res.code == 200){
                this.assemblyData(res.data);
              }
            });
          }else if(this.$route.query.type == "iLook"){
            getNoAnswerExaminationPaperById({ep_id:parseInt(this.$route.query.ep_id)}).then(res=>{
                if(res.code == 200){
                  this.assemblyData(res.data);
                }
            })
          }

        },

        assemblyData(data){
          for(let obj of data.testQuestionsList){
            if(obj.tq_type == 2) { //多选题
              for(let que of obj.questionList){
                let answer = [];
                if(que.chooseAnswerList.length > 0){
                  for(let ans of que.chooseAnswerList){
                    answer.push(ans.ca_answer)
                  }
                }
                que.answerArr = answer;
              }
            }else if(obj.tq_type == 4){ //填空题
              for(let que of obj.questionList){
                let answer = [];
                if(que.fillBanksAnswer.fba_answer != null){
                   answer = que.fillBanksAnswer.fba_answer.split("-");
                }
                let answerArr = [];
                for(let i = 0;i < answer.length;i ++){
                  answerArr.push({label:"空_"+(i+1),value:answer[i]=="*"?"":answer[i]});
                }
                que.answerArr = answerArr;
              }
            }

          }
          this.examinationPaper = data;
          //console.log(this.examinationPaper);
        },

        returnVolumeChange(){
          this.$router.push({ path: '/invigilate/examinationPaper/volumeChange'});
        },

        returnRoomPaper(){
          this.$router.push({ path: '/invigilate/examinationRoom/component/insertRoom/'+this.$route.query.id });
        },

        returnUserRoomPaper(){
          this.$router.push({ path: '/examinee/room/component/insertRoom/'+this.$route.query.id });
        }
      }
  }
</script>
